<template>
  <!-- 文本框输入法 -->

  <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :col-gap="12" :row-gap="16" @keydown.esc="handleReset"
          @keyup.enter="handleSearch">

    <a-grid-item v-for="(item, index) in UI.queryArray" v-show="item.showStatus" :key="index">
      <a-tooltip mini  :content="item.placeholder" background-color="#3491FA">

      <!-- 下拉选择框 -->
      <a-select
          v-if="item.type === 'select'"
          v-model="formState[item.fieldCode]"
          allow-clear

          show-search
          :max-tag-count="1"
          :mode="item.multiple ? 'multiple' : 'combobox'"
          option-filter-prop="label"
          :placeholder="item.placeholder"
          :options="item.options"
          style="width: 100%"
      />

      <!-- 数据字典-->
      <smart-dict
          v-else-if="item.type === 'dict'"
          v-model="formState[item.fieldCode]"
          style="width: 100%"
          :lazy="true"
          :placeholder="item.placeholder"
          :url="item.url"
      />

      <!-- 具体日期选择器 -->
      <a-date-picker
          v-else-if="item.type === 'date'"
          v-model="formState[item.fieldCode]"
          clearable
          mode="date"
          style="width: 100%"
          :value-format="dateFormat"
          :placeholder="item.placeholder"
      />

      <a-range-picker
          v-else-if="item.type === 'dateRange'"
          v-model="formState[item.fieldCode]"
          clearable
          :value-format="dateFormat"
          :placeholder="[item.placeholder, '起止时间']"
          :shortcuts="presets"
      />

      <!-- {{ item }} -->
      <smart-tree-selector
          v-else-if="item.type === 'treeSelect'"
          v-model="formState[item.fieldCode]"
          :placeholder="item.placeholder"
          clearable
          :url="item.url"
          style="width: 100%"
      />


      <!-- 普通文本选择-->
      <a-input v-else v-model="formState[item.fieldCode]" allow-clear :placeholder="item.placeholder"/>


      </a-tooltip>
    </a-grid-item>
    <!--   提交操作   -->
    <a-grid-item>
      <a-space>
        <a-button type="primary" @click="handleSearch">查询</a-button>
        <a-button @click="handleReset">重置</a-button>
        <a-button v-if="UI.queryArray.findIndex(it => !it.showDefault) >= 0" type="text" style="padding-left: 0"
                  @click="toggle">
					<span v-if="UI.showExpand">
						<text>收起</text>
            <icon-caret-up/>

					</span>
          <span v-else>
						<text>展开</text>
            <icon-caret-down/>

					</span>
        </a-button>
      </a-space>
    </a-grid-item>
  </a-grid>

</template>

<script setup lang="ts" name="smart-search">
import {reactive} from 'vue'
import {EmptyUtil, TimeUtil} from '@/utils'

const {presets} = TimeUtil
const props = defineProps({
  queryArray: {
    type: Array,
    require: true,
    default: () => [],
  },
  defaultValue: {
    type: Object,
    require: false,
    default: () => {
      return {}
    },
  },
})

const emit = defineEmits(['on-handler'])

const dateFormat = 'YYYY-MM-DD'

const UI = reactive({
  queryArray: [...props.queryArray],
  showExpand: false,
})
const formState = reactive({})

const handleSearch = async () => {
  const obj = {...formState}
  for (const item in obj) {
    if (Array.isArray(obj[item])) {
      obj[item] = obj[item].join(',')
    }
  }
  const res = EmptyUtil.filterObjEmpty(obj);
  emit('on-handler', res)
}

const toggle = () => {
  UI.showExpand = !UI.showExpand
  UI.queryArray.forEach(item => {
    // @ts-ignore

    if (item.showDefault === false) item.showStatus = !item.showStatus

  })
}
/**
 * @description 初始化查询参数
 * */
const init = () => {
  const defKeys = Object.keys(props.defaultValue)
  UI.queryArray.forEach(it => {
    // @ts-ignore
    const {fieldCode, multiple, type} = it
    if (type === 'dateRange' || multiple) {
      formState[fieldCode] = defKeys.includes(fieldCode) ? props.defaultValue[fieldCode].split(',') : undefined
    } else {
      formState[fieldCode] = defKeys.includes(fieldCode) ? props.defaultValue[fieldCode] : undefined
    }
  })
}
const handleReset = async () => {
  await init()
  emit('on-handler', formState)
}

init()
</script>
